import ProCard from '@ant-design/pro-card';
import { useState, useEffect } from 'react';
import { Link } from 'umi';
import { Image } from 'antd'
import EchaTS from './echarts';
import { getAledata } from '@/services/ant-design-pro/api'
import RcResizeObserver from 'rc-resize-observer';
import styles from './index.less';
export default function Work() {
  const [userinfo,] = useState(JSON.parse(localStorage.getItem('userinfo') as string));
  const [responsive, setResponsive] = useState(false);
  const [data, setdata] = useState([]);
  useEffect(() => {
    getAledata().then(res => {
      // 最近几天文章数据
      let newdata = res.data[0].filter((item: any) => {
        let now = new Date();
        let date = new Date(item.publishAt);
        let inter = parseInt((now.getTime() - date.getTime()) / 1000 / 60 as any);
        if (inter < 60 * 24 * 2) {
          return item;
        }
      })
      setdata(newdata);
    })
  }, []);
  return (
    <div className={styles.index_box}>
      <div className={styles.top}>
        <ProCard layout="default" bordered>
          {userinfo.name === 'admin' ? <h1>您好 admin</h1> : <h1>您好 访客</h1>}
          {userinfo.name === 'admin' ? <h5>您的角色：管理员</h5> : <h5>您的角色：访客</h5>}
        </ProCard>
      </div>
      <div className={styles.down}>
        {/* echats */}
        <ProCard style={{ marginTop: 40 }} title="面板导航" layout="default" bordered>
          <EchaTS />
        </ProCard>
        {/* 快速导航 */}
        <RcResizeObserver
          key="resize-observer"
          onResize={(offset) => {
            setResponsive(offset.width < 596);
          }}
        >
          <ProCard.Group style={{ marginTop: 40, textAlign: 'center' }} title="快速导航" direction={responsive ? 'column' : 'row'}>
            <ProCard>
              <Link to="/form/basic-form">文章管理</Link>
            </ProCard>
            <ProCard>
              <Link to="/comment">评论管理</Link>
            </ProCard>
            <ProCard>
              <Link to="/users">用户管理</Link>
            </ProCard>
            <ProCard>
              <Link to="/view">访问管理</Link>
            </ProCard>
            <ProCard>
              <Link to="/setting">系统设置</Link>
            </ProCard>
          </ProCard.Group>
        </RcResizeObserver>
        {/* 最新文章 */}
        <ProCard.Group style={{ marginTop: 40, height: 'auto' }} title="最新文章" >
          <div className={styles.group}>
            {data.length && data.map((item: any) => {
              console.log(item);
              
              return <ProCard key={item.id} style={{ maxWidth: 375, height: 180 }} hoverable bordered>
                
                <Image
                  width={100}
                  height={50}
                  src={item.cover}
                  preview={false}
                  fallback=""
                />
                <span>文章封面</span>
                  <h3>{item.title}</h3>
              </ProCard>
            })}
          </div>
        </ProCard.Group>

      </div>
    </div>
  )
}
